/* jsx ctrl+m*/
import React, { Component } from 'react';
import './css/index.css'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      msg: '',
      list: []
    }
  }
  render() {
    const ListItem = this.state.list.map((item, index) => {
      return (<div key={item}><sapn>{index + 1}、</sapn>{item}<button onClick={this.handleDelete.bind(this, { index })}>删除</button></div>)
    })
    return (
      <div>
        <h1>todolist</h1>
        <input type="text"
          value={this.state.msg}
          onChange={this.handleChange}
          onKeyUp={this.handleEnter} />
        <div>{ListItem}</div>
      </div>
    );
  }
  handleChange = (e) => {
    // console.log(e.target.value);
    this.setState({
      msg: e.target.value
    })
  }
  handleEnter = (e) => {
    if (e.keyCode == 13) {
      console.log(this.state.msg);
      let list = this.state.list
      list.push(this.state.msg)
      this.setState({
        list
      })
    }
  }
  handleDelete = (index) => {
    console.log(index);
    let list = this.state.list
    list.splice(index, 1)
    this.setState({
      list
    })
  }
}
export default App;